<template>
	<view class="User" v-if="showPage">
		<view class="userInfo">
			<!-- 没登录情况 -->
			<view class="noLogin" @tap="gotoLogin" v-if="!IsLogoin">
				<view class="imageTop">
					<image src="../../uni_modules/helang-waterfall/static/waterfall/0.jpg" mode=""></image>
				</view><br>
				<view class="UserName">
					登录/注册
				</view>
			</view>
			<view class="Login" v-if="IsLogoin">
				<view class="imageTop">
					<image :src="userInfo.icon" mode=""></image>
				</view><br>
				<view class="UserName">
					{{userInfo.username}}
				</view>
			</view>
		</view>
		<view class="navOrder">
			<view
				style="display: flex;justify-content: space-between;padding: 20rpx 0;border-bottom: 1px solid gainsboro;">
				<view style="padding-left: 20rpx;font-weight: 700;">我的订单</view>
				<view></view>
				<view style="padding-right: 20rpx;color: gray;" @tap="gotoMyOrder(0)">全部订单
					<uni-icons type="right" color="gray"></uni-icons>
				</view>
			</view>
			<view class="grid-item">
				<uni-grid :column="5" :highlight="true" :showBorder="false">
					<uni-grid-item v-for="(item,index) in gridItemList" :key="index">
						<view class="grid-item-box"
						 @tap="gotoMyOrderTab(index)"
						 style="background-color: #fff;padding-top: 25rpx;">
							<view class="icon">
								<text :class="item.iconClass"></text>
							</view>
							<text class="text">{{item.name}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>

		<view class="bottomOption">
			<view class="item" v-for="(item,index) in bottomOptionList" :key="index" @tap="gotoItmePage(index)">
				<view>
					<text :class="item.cionClass" :style="item.style"></text>
					<text style="padding-left: 20rpx;">{{item.name}}</text>
				</view>
				<view>
					<uni-icons type="right" color="gray"></uni-icons>
				</view>
			</view>
		</view>
		<view class="btn" v-if="IsLogoin">
			<button type="warn" @tap="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				title: 'Hello',
				gridItemList: [{
						name: '未付款',
						iconClass: 'iconfont icon-wodedingdan4'
					},
					{
						name: '待发货',
						iconClass: 'iconfont icon-daishouhuo2'
					},
					{
						name: '待收货',
						iconClass: 'iconfont icon-daishouhuo1'
					},
					{
						name: '待评价',
						iconClass: 'iconfont icon-daipingjia2'
					},
					{
						name: '已完成',
						iconClass: 'iconfont icon-qiandao'
					}
				],
				bottomOptionList: [{
						name: '账号设置',
						cionClass: 'iconfont icon-xitongshezhi',
						style: 'color: red;  font-size:40rpx;'
					},
					{
						name: '收货地址',
						cionClass: 'iconfont icon-dizhi',
						style: 'color: lightgreen; font-size:40rpx;'
					},
					{
						name: '我的优惠',
						cionClass: 'iconfont icon-youhuijuan',
						style: 'color: pink;  font-size:40rpx;'
					},
					{
						name: '我的足迹',
						cionClass: 'iconfont icon-zuji',
						style: 'color: orangered;  font-size:40rpx;'
					},
					{
						name: '我的收藏',
						cionClass: 'iconfont icon-line-magicmofabang',
						style: 'color: red;  font-size:40rpx;'
					},

					{
						name: '联系我们',
						cionClass: 'iconfont icon-lianxiwomen',
						style: 'color: cornflowerblue;  font-size:40rpx;'
					},
				],
				userInfo: {},
				IsLogoin: false,
				showPage: false,
				path: [
					"/pages/view/Account",
					"/pages/view/Address",
					"/pages/view/Discounts",
					"/pages/view/MyFootprint"
				]
			}
		},
		onShow() {
			this.$api.user.getUserInfo().then(res => {
				if (res.code == 200) {
					this.userInfo = res.data
					this.IsLogoin = true
				} else {
					uni.showToast({
						title: "您还没有登录呐",
						icon: 'none'
					})
				}
			})
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			setTimeout(() => {
				this.showPage = true
				uni.hideLoading()
			}, 800)
		},
		methods: {
			gotoLogin() {
				uni.navigateTo({
					url: "/pages/view/Login"
				})
			},
			logout() {
				this.$store.commit("LOGOUT")
				this.userInfo = {}
				this.IsLogoin = false
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			gotoItmePage(index) {
				if (index == 5) {
					uni.navigateTo({
						url: "/pages/view/AboutMy"
					})
				} else if (index == 4) {
					uni.showToast({
						title: "敬请期待！",
						icon: 'loading'
					})
				} else {
					if (uni.getStorageSync("TOKEN")) {
						uni.navigateTo({
							url: this.path[index]
						})
					} else {
						uni.showToast({
							title: "请先登录~",
							icon: 'none'
						})
					}
				}
			},
			gotoMyOrder(current){
				if (uni.getStorageSync("TOKEN")) {
					uni.navigateTo({
						url:`/pages/view/MyOrder?current=${current}&tab=${false}`
					})
				} else {
					uni.showToast({
						title: "请先登录~",
						icon: 'none'
					})
				}
			},
			gotoMyOrderTab(current){
				if (uni.getStorageSync("TOKEN")) {
					uni.navigateTo({
						url:`/pages/view/MyOrder?current=${current}&tab=${true}`
					})
				} else {
					uni.showToast({
						title: "请先登录~",
						icon: 'none'
					})
				}
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.User {
		.userInfo {
			height: 300rpx;
			width: 100%;
			background-image: url(@/static/userBg.png);

			.noLogin {
				.imageTop {
					margin: 0 auto;
					width: 130rpx;
					height: 130rpx;
					border-radius: 130rpx;
					overflow: hidden;
					transform: translateY(50rpx);
				}

				text-align: center;

				image {
					width: 130rpx;
					height: 130rpx;
				}

				.UserName {
					/*  #ifdef MP-WEIXIN */
					margin-top: 65rpx;
					/*  #endif */

					/*  #ifdef H5 || APP-PLUS */
					margin-top: 30rpx;
					/*  #endif */
					color: white;
					font-weight: 700;
				}
			}

			.Login {
				.imageTop {
					margin: 0 auto;
					width: 130rpx;
					height: 130rpx;
					border-radius: 130rpx;
					overflow: hidden;
					transform: translateY(50rpx);
				}

				text-align: center;

				image {
					width: 130rpx;
					height: 130rpx;
				}

				.UserName {
					/*  #ifdef MP-WEIXIN */
					margin-top: 55rpx;
					/*  #endif */
					
					/* #ifdef APP-PLUS || APP */
					margin-top: 55rpx;
					/* #endif */
					

					/*  #ifdef H5 */
					margin-top: 23rpx;
					/*  #endif */
					color: white;
					font-weight: 700;
				}
			}
		}

		.navOrder {
			height: auto;
			width: 100%;
			background-color: white;
			text-align: center;

			.grid-item {
				color: gray;

				.icon {
					text {
						font-size: 50rpx;
					}
				}
			}
		}


		.bottomOption {
			margin-top: 20rpx;
			width: 100%;
			background-color: white;

			.item {
				height: 80rpx;
				width: 100%;
				line-height: 80rpx;
				border-bottom: 1px solid gainsboro;
				display: flex;
				justify-content: space-between;

				view {
					padding: 0 30rpx;
				}
			}
		}

		.btn {
			margin-top: 20rpx;

			uni-button {
				border-radius: 0;
				background-color: #ff1a49;
				color: white;
			}
		}
	}
</style>
